import { Button, Tabs } from "antd";
import DocInstanceOptionHistory from "./DocInstanceOptionHistory";
import TextTopicBackgroundParagraph from "./TextTopicBackgroundParagraph";
import { MenuFoldOutlined, MenuUnfoldOutlined, SettingOutlined } from "@ant-design/icons";
import TourismCapacity from "./TourismCapacity";
import BenefitEvaluation from "./BenefitEvaluation";
import WordEditorParagraphCheck from "./WordEditorParagraphCheck";
import SpeciesDataBase from "./SpeciesDataBase";
import { ReactNode, forwardRef, useState } from "react";
import InsertSubTable from "./InsertSubTable";

interface Props {
    changeBackgroundParagraph: Function
    // insertEconomicBenefitAnalysisParagraphList: Function
    // insertEcologicalBenefitAnalysisParagraphList: Function,
    // insertCustomBackgroundListToTourismCapacityTopic: Function
    // insertSocialResultsTopicList: Function
    insertDocItemByTargetTopicName: Function
    insertDocItemToCursorPosition: Function
    handleSetFocusDocItem: Function
}

const WordEditorPluginsTabs = (props: Props, ref: any) => {

    const {
        changeBackgroundParagraph,
        // insertSocialResultsTopicList,
        // insertEconomicBenefitAnalysisParagraphList,
        // insertEcologicalBenefitAnalysisParagraphList,
        // insertCustomBackgroundListToTourismCapacityTopic,
        insertDocItemToCursorPosition,
        insertDocItemByTargetTopicName,
        handleSetFocusDocItem
    } = props;

    const [sideBarIsFold, setSideBarIsFold] = useState(false);

    const renderTabContentWrapper = (content: any) => {
        return (
            <div
                style={{ width: sideBarIsFold ? 0 : '100%', height: '100%', overflow: 'hidden' }}
            >
                {content}
            </div>
        )
    };

    const pluginTabs = [
        {
            key: 'TextTopicBackgroundParagraph',
            label: (
                <div
                    // style={{marginTop: -4}} 
                    className='flex-col word-editor-plugins-tab'
                >
                    <span style={{ fontSize: 22 }} className="iconfont-1 ghzs-gray-wenbenyulan"></span>
                    <span>参考范文</span>
                </div>
            ),
            children: renderTabContentWrapper(
                <TextTopicBackgroundParagraph
                    changeBackgroundParagraph={changeBackgroundParagraph}
                />
            )
        },
        // {
        //     key: 'DocInstanceOptionHistory',
        //     label: (
        //         <div
        //             // style={{marginTop: -12}} 
        //             className='flex-col word-editor-plugins-tab'
        //         >
        //             <span style={{ fontSize: 22 }} className="iconfont ghzs-color-caozuorizhi"></span>
        //             <span>操作记录</span>
        //         </div>
        //     ),
        //     children: renderTabContentWrapper(<DocInstanceOptionHistory />)
        // },
        {
            key: 'WordEditorParagraphCheck',
            label: (
                <div
                    // style={{marginTop: -8}} 
                    className='flex-col word-editor-plugins-tab'
                >
                    <span style={{ fontSize: 22 }} className="iconfont ghzs-color-a-zu557"></span>
                    <span>文档检查</span>
                </div>
            ),
            children: renderTabContentWrapper(
                <WordEditorParagraphCheck
                    handleSetFocusDocItem={handleSetFocusDocItem}
                />)
        },
        {
            key: 'SpeciesDataBase',
            label: (
                <div
                    // style={{marginTop: -6}} 
                    className='flex-col word-editor-plugins-tab'
                >
                    <span style={{ fontSize: 22 }} className="iconfont ghzs-color-wuzhongminglu"></span>
                    <span>物种查询</span>
                </div>
            ),
            children: renderTabContentWrapper(<SpeciesDataBase />)
        },
        {
            key: 'BenefitEvaluation',
            label: (
                <div
                    // style={{marginTop: -5}} 
                    className='flex-col word-editor-plugins-tab'
                >
                    <span style={{ fontSize: 22 }} className="iconfont-1 ghzs-gray-shengtaixiaoyi1"></span>
                    <span>效益评价</span>
                </div>
            ),
            children: renderTabContentWrapper(
                <BenefitEvaluation
                    insertDocItemByTargetTopicName={insertDocItemByTargetTopicName}
                />
            )
        },
        {
            key: 'TourismCapacity',
            label: (
                <div
                    className='flex-col word-editor-plugins-tab'
                >
                    <span style={{ fontSize: 22 }} className="iconfont-1 ghzs-gray-huanjingrongliangfenxi"></span>
                    <span>旅游容量</span>
                </div>
            ),
            children: renderTabContentWrapper(
                <TourismCapacity
                    insertDocItemByTargetTopicName={insertDocItemByTargetTopicName}
                />
            )
        },
        {
            key: 'ExtraTable',
            label: (
                <div
                    className='flex-col word-editor-plugins-tab'
                >
                    <span style={{ fontSize: 22 }} className="iconfont-1 ghzs-gray-charufuben"></span>
                    <span>插入附表</span>
                </div>
            ),
            children: renderTabContentWrapper(
                <InsertSubTable
                    insertDocItemToCursorPosition={insertDocItemToCursorPosition}
                />
            )
        }
    ]

    const onActiveTabChange = (e: 'currentTopic' | 'allTopic') => {
        // setCurrentActiveTabKey(e);
        if (sideBarIsFold) {
            setSideBarIsFold(false)
        }
    }

    const switchSlidBarFold = () => {
        setSideBarIsFold(!sideBarIsFold)
    }

    const onMouseDown = (e: any) => {
        // e.preventDefault();
        // e.stopPropagation();
    };

    return (
        <div
            className='edit-page-left-content'
            style={{
                width: sideBarIsFold ? 74 : 420
            }}
            onMouseDown={onMouseDown}
        >
            <Tabs
                defaultActiveKey="currentTopic"
                items={pluginTabs}
                tabPosition='right'
                className='word-editor-plugin-tabs disable-drag'
                onChange={onActiveTabChange}
                tabBarExtraContent={{
                    right: (
                        <div
                            className="flex-row word-editor-plugin-tabs-fold"
                        >
                            <Button
                                type={'text'}
                                icon={sideBarIsFold ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />}
                                size={'small'}
                                onClick={switchSlidBarFold}
                            >
                                {sideBarIsFold ? '展开' : '收起'}
                            </Button>
                        </div>
                    )
                }}
            />
        </div>
    )
}


export default forwardRef(WordEditorPluginsTabs);